<template>
  <section class="types">
    <div class="types-header">
      <h3 class="types-title">分类浏览</h3>
    </div>
    <ul class="types-list">
      <li class="types-item" v-for="type in types" :key="type.name">
        <a :href="type.link">
          <div class="types-name">{{ type.name }}</div>
          <span class="types-more"></span>
        </a>
      </li>
    </ul>
  </section>
</template>

<style lang="scss" scoped>
  .types {
    padding-left: 18px;
    margin-bottom: 30px;
  }

  .types-header {
    padding: 15px 0;
  }

  .types-title {
    font-size: 18px;
    font-weight: normal;
    margin: 0;
  }

  .types-list {
    display: flex;
    border-top: solid 1px #eee;
    border-bottom: solid 1px #eee;
    flex-wrap: wrap;

    .types-item {
      flex-basis: 50%;
      border-bottom: solid 1px #eee;
      box-sizing: border-box;

      &:nth-child(2n+1) {
        border-right: solid 1px #eee;
      }

      &:last-child {
        border-bottom: none;
      }

      a {
        display: block;
        padding: 12px;
      }
    }

    .types-name {
      display: inline-block;
      font-size: 15px;
    }

    .types-more {
      float: right;
      font-weight: bold;
      display: inline-block;
      border-right: solid 1px #ccc;
      border-bottom: solid 1px #ccc;
      width: 10px;
      height: 10px;
      transform: rotate(-45deg);
      margin-top: 4px;
      margin-right: 5px;
    }
  }

</style>

<script>
  export default {
    data() {
      return {
        types: [{
            name: '经典',
            link: 'https://m.douban.com/movie/classic'
          },
          {
            name: '冷门佳片',
            link: 'https://m.douban.com/movie/underrate'
          },
          {
            name: '豆瓣高分',
            link: 'https://m.douban.com/movie/doubantop'
          },
          {
            name: '动作',
            link: 'https://m.douban.com/movie/action'
          },
          {
            name: '喜剧',
            link: 'https://m.douban.com/movie/comedy'
          },
          {
            name: '爱情',
            link: 'https://m.douban.com/movie/love'
          },
          {
            name: '悬疑',
            link: 'https://m.douban.com/movie/mystery'
          },
          {
            name: '恐怖',
            link: 'https://m.douban.com/movie/horror'
          },
          {
            name: '科幻',
            link: 'https://m.douban.com/movie/scifi'
          },
          {
            name: '治愈',
            link: 'https://m.douban.com/movie/sweet'
          },
          {
            name: '文艺',
            link: 'https://m.douban.com/movie/artfilm'
          },
          {
            name: '成长',
            link: 'https://m.douban.com/movie/youth'
          },
          {
            name: '动画',
            link: 'https://m.douban.com/movie/animation'
          },
          {
            name: '华语',
            link: 'https://m.douban.com/movie/chinese'
          },
          {
            name: '欧美',
            link: 'https://m.douban.com/movie/western'
          },
          {
            name: '韩国',
            link: 'https://m.douban.com/movie/korean'
          },
          {
            name: '日本',
            link: 'https://m.douban.com/movie/japanese'
          }
        ]
      }
    }
  }

</script>
